<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.7.1.min.js"></script>
</head>

<body>
    <button id="btn1">重新开始一局游戏</button><br />
    <span>请输入要猜的数字:</span><input type="number" id="input1"> <button id="btn2">猜</button><br />
    <span>已经猜的次数:</span><span id="sum">0</span><br />
    <sapn id="end">结果:</sapn>
    <sapn id="result"></sapn>
    <script>
        let randomNum = Math.floor(Math.random() * 100) + 1;
        console.log(randomNum);
        
        let sum = 0;
        $("#btn2").click(function () {
            sum++;
            let tmp = $("#input1").val();

        if (tmp > randomNum) {
            $("#result").text("猜大了");
            $("#result").css("color", "red");
        } else if (tmp < randomNum) {
            $("#result").text("猜小了");
            $("#result").css("color", "red");
        } else {
            $("#result").text("猜对了");
            $("#result").css("color", "green");
        }
        $("#sum").text(sum);
        })
        $("#btn1").click(function () {
            
            sum = 0;
            $("#sum").text(sum);
            randomNum = Math.floor(Math.random() * 100) + 1;
            console.log(randomNum);
            
            $("#result").empty();

        })

    </script>
</body>

</html>